<template>
	<view class="orders">
		<view class="tabs">
			<view class="tab-item" :class="{ act: activeTab == index }" v-for="(item, index) in tabs" :key="index" @tap="handleTabChange(item, index)">{{ item.name }}</view>
		</view>
		<!-- 订单 -->
		<view class="list" v-if="activeTab != 4">
			<view class="list-item" v-for="(item, index) in filterList" :key="index">
				<view class="top">
					<view class="orderId">订单编号: {{ item.order.orderSn }}</view>
					<view class="orderStatus">{{ item.order.status | statuslabel }}</view>
				</view>
				<view class="middle">
					<view class="product" v-for="product in item.items" :key="product.id">
						<image :src="product.productPic" mode=""></image>
						<view class="info">
							<view class="p1">
								<view class="name">{{ product.productName }}</view>
								<view class="price">￥{{ item.productPrice || 0 }}</view>
							</view>
							<view class="p2">
								<view class="productSkuId">编号: {{ product.productSkuId }}</view>
								<view class="num">x{{ product.productQuantity }}</view>
							</view>
							<view class="sku">
								<text>规格:</text>
								<text class="sku-item" v-for="(skuItem, index) in JSON.parse(product.productAttr)" :key="index">{{ skuItem.key }}: {{ skuItem.value }}</text>
							</view>
							<view class="p4" v-if="activeTab == 2">
								<view class="btn isreturn" v-if="product.isReturn"><text>退货中</text></view>
								<navigator :url="`/pages/order/orderback/orderback?id=${product.orderId}&skuid=${product.productSkuId}`" class="btn" v-else>退货</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="time-total">
						<view class="time">时间: {{ item.order.createTime }}</view>
						<view class="total">合计: ￥{{ item.order.totalAmount }}</view>
					</view>
					<view class="btns" v-if="activeTab != 1">
						<view class="btn" v-if="activeTab == 0" @tap="handleCancelOrder(item)">取消订单</view>
						<navigator class="btn" v-if="activeTab == 0" :url="`confirmorder/confirmorder?id=${item.order.id}`">付款</navigator>
						<view class="btn" v-if="activeTab == 2" @tap="handleReceiveDone(item)">确认收货</view>
						<view class="btn delete" v-if="activeTab == 3" @tap="handleDeleteOrder(item)">订单已关闭,删除记录</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 售后 -->
		<view class="list" v-else>
			<view class="list-item" v-for="(item, index) in orderReturnList" :key="index">
				<view class="top">
					<view class="orderId">订单编号: {{ item.orderSn }}</view>
					<view class="orderStatus" :style="{ color: item.status == 2 || item.status == 3 ? 'red' : '' }">{{ item.status | orderReturnStatusLabel }}</view>
				</view>
				<view class="middle">
					<view class="product">
						<image :src="item.productPic" mode=""></image>
						<view class="info">
							<view class="p1">
								<view class="name">{{ item.productName }}</view>
								<view class="price">￥{{ item.productPrice || 0 }}</view>
							</view>
							<view class="p2">
								<view class="productSkuId">编号: {{ item.id }}</view>
								<view class="num">x{{ item.productCount }}</view>
							</view>
							<view class="sku">
								<text>规格:</text>
								<text class="sku-item" v-for="(skuItem, index) in JSON.parse(item.productAttr)">{{ skuItem.key }}: {{ skuItem.value }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="time-total">
						<view class="time">时间: {{ item.createTime }}</view>
						<view class="total">合计: ￥{{ item.returnAmount }}</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="!orderList.length && !orderReturnList.length"></empty>
	</view>
</template>

<script>
import { findAllOrders, orderReturnApplys, cancelOrder, findOrdersByPage, receiveDone, deleteOrder } from '../../api/order/index.js';
// 订单状态label
const statuelabels = {
	0: '未付款',
	1: '确认付款,等待发货',
	2: '已发货',
	3: '已收货',
	4: '已退单'
};

// 售后订单状态: 0->待处理；1->退货中；2->已完成；3->已拒绝
const orderReturnStatusLabels = {
	0: '等待处理',
	1: '确认退货,等待用户发货',
	2: '已退款',
	3: '已拒绝',
	9: '拒绝退货'
};
import mixin from '../../mixins/mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			orderList: [], // 订单列表,
			orderReturnList: [], // 售后订单
			activeTab: 0,
			tabs: [{ name: '待付款', status: 0 }, { name: '已付款', status: 1 }, { name: '已发货', status: 2 }, { name: '已收货', status: 3 }, { name: '售后', status: 4 }]
		};
	},
	computed: {
		filterList() {
			if (this.activeTab == 4) {
				return [];
			}
			return this.orderList.filter(el => {
				if (this.activeTab == 3) {
					return el.order.status == 3 || el.order.status == 4;
				} else {
					return el.order.status == this.activeTab;
				}
			});
		}
	},
	methods: {
		// 获取所有订单
		async getOrderList() {
			const {
				data: { orderList },
				success
			} = await findAllOrders();
			if (success) {
				this.orderList = orderList;
			}
		},
		// 分页获取订单, 数据太多不建议使用findAllOrders
		async getOrderListByPage() {
			const res = await findOrdersByPage(1, 50);
			this.orderList = res.data.rows;
		},
		// 获取所有的退货订单
		async getOrderReturn() {
			const res = await orderReturnApplys();
			this.orderReturnList = res.data.items;
		},
		// tab点击
		handleTabChange(tab, index) {
			this.activeTab = index;
			// 切换tab 列表回到顶部
			uni.redirectTo({
				url: `/pages/order/order?type=${index}`
			});
		},
		// 取消订单
		async handleCancelOrder(item) {
			const { success, message } = await cancelOrder(item.order.id);
			if (success) {
				uni.showToast({
					title: '取消成功',
					icon: 'success'
				});
				// 重新获取list
				this.getOrderListByPage();
			} else {
				uni.showToast({
					title: message,
					icon: 'error'
				});
			}
		},
		// 确认收货
		async handleReceiveDone(item) {
			const { success, message } = await receiveDone({
				orderId: item.order.id
			});
			if (success) {
				// 重新获取list
				this.getOrderListByPage();
			} else {
				uni.showToast({
					title: message,
					icon: 'error'
				});
			}
		},
		// 删除订单
		async handleDeleteOrder(item) {
			const { success, message } = await deleteOrder(item.order.id);
			if (success) {
				// 重新获取list
				this.getOrderListByPage();
			} else {
				uni.showToast({
					title: message,
					icon: 'error'
				});
			}
		}
	},
	filters: {
		statuslabel(status) {
			return statuelabels[status] || '无效订单';
		},
		orderReturnStatusLabel(status) {
			return orderReturnStatusLabels[status] || '无效订单';
		}
	},
	onLoad(options) {
		this.activeTab = Number(options.type);
		if (this.checkLogin()) {
			if (this.activeTab == 4) {
				this.getOrderReturn();
			} else {
				// this.getOrderListByPage();
				this.getOrderList();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.orders {
	// 顶部tabs
	.tabs {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 62rpx;
		background-color: #354e44;
		color: #fff;
		font-size: 30rpx;
		line-height: 62rpx;
		padding-top: 10rpx;
		z-index: 10;
		.tab-item {
			height: 100%;
			border-bottom: 2rpx solid transparent;
			box-sizing: border-box;
			&.act {
				color: #dd524d;
				border-bottom: 2rpx solid #dd524d;
			}
		}
	}
	// 订单列表
	.list {
		margin: 130rpx 30rpx;
		.list-item {
			box-sizing: border-box;
			padding: 36rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 30rpx 0;
			font-size: 24rpx;
			color: #3e3e3e;
			.top {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #f1ece7;
			}
			// 商品列表
			.middle {
				.product {
					display: flex;
					border-bottom: 2rpx solid #f1ece7;
					padding: 30rpx 0;
					image {
						width: 162rpx;
						height: 162rpx;
					}
					.info {
						flex: 1;
						margin-left: 30rpx;
						.p1 {
							display: flex;
							justify-content: space-between;
							color: #3e3e3e;
							font-size: 26rpx;
							.name {
								width: 80%;
							}
						}
						.p2 {
							display: flex;
							justify-content: space-between;
							margin-top: 40rpx;
							color: #8d8d8d;
							font-size: 22rpx;
						}
						.sku {
							color: #8d8d8d;
							font-size: 22rpx;
							margin-top: 10rpx;
							.sku-item {
								margin-left: 10rpx;
							}
						}
						.p4 {
							display: flex;
							justify-content: flex-end;
							.btn {
								text-decoration: underline;
								&.isreturn {
									text {
										color: #f00;
									}
								}
							}
						}
					}
				}
			}
			// item 底部合计&按钮
			.bottom {
				margin-top: 30rpx;
				.time-total {
					display: flex;
					justify-content: space-between;
				}
				.btns {
					display: flex;
					justify-content: flex-end;
					margin-top: 30rpx;
					.btn {
						width: 124rpx;
						height: 50rpx;
						border: 2rpx solid #2d4f43;
						font-size: 26rpx;
						border-radius: 10rpx;
						color: #2d4f43;
						text-align: center;
						line-height: 50rpx;
						margin-left: 32rpx;
						padding: 0 10rpx;
						&.delete {
							width: auto;
							border: 2rpx solid red;
						}
					}
				}
			}
		}
	}
}
</style>
